<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<!--操作符-->
		<div class="mui-content">
			<div style="padding: 20px;">
				<input type="button" class="mui-btn-blue" value="点击这里弹出操作菜单" onclick="showPop();" />
			</div>
			
			<!--数字角标-->
			<div>
				<span class="mui-badge">1</span>
				<span class="mui-badge mui-badge-primary">2</span>
				<span class="mui-badge mui-badge-success">3</span>
				<span class="mui-badge mui-badge-warning">4</span>
				<span class="mui-badge mui-badge-danger">5</span>
				<span class="mui-badge mui-badge-royal">6</span>
			</div>
			
			<!--无底色角标-->
			<div>
				<span class="mui-badge mui-badge-inverted">1</span>
				<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
				<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
				<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
				<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
				<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
			</div>
		</div>
		
		<!--可选择菜单-->
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">菜单1</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">菜单2</a>
				</li>
			</ul>
			
			<!--取消菜单-->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet1"><b>取消</b></a>
				</li>
			</ul>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			function showPop(){
				mui('#sheet1').popover('toggle');
			}
		</script>
	</body>

</html>